<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const pageTabsIndex = ref(1)
function clickPageTabs(index:number){
    pageTabsIndex.value = index
    PageNum.value = 1
    selectedRowIds.value.clear();
    postDeviceWarnInfo()
}

const faultIndex = ref(0)
function clickFault(index: number) {
    faultIndex.value = index
    PageNum.value = 1
    postDeviceWarnInfo()
}

//table-list
const tableHeight = ref(0)
// 定义表格数据的类型
interface TableRow {
    deviceId: number;
}
const listTableData = ref<any>([])
const listTableData1 = ref<any>([])
// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.deviceId));
    console.log(selectedRowIds.value)
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.deviceId) ? 'selected-row' : '';
};
onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 300;
});

// 新增
const addForm = ref({
    status: '',
    remark:'',
})
const handleDialogVisible = ref(false)

import { DeviceWarnInfo, DeviceWarnStatus } from "@/api";

const PageNum = ref(1)
const PageSize = ref(10)
const totalPage = ref(0)
//list
const postDeviceWarnInfo = () => {
    DeviceWarnInfo({
        GroupId: pageTabsIndex.value,
        Status: faultIndex.value,

        PageNum: PageNum.value,
        PageSize: PageSize.value
    }).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

// 修改
const sId = ref('')
const submitStatus = () => {
    if(!addForm.value.status){
        ElMessage.error('请选择处理结果')
        return
    }
    DeviceWarnStatus({
        id: sId.value,
        status: addForm.value.status,
        remark: addForm.value.remark
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '处理成功',
            })
            handleDialogVisible.value = false
            postDeviceWarnInfo()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 忽略
const ignore = (id:any) => {
    DeviceWarnStatus({
        id: id,
        status: 2
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '处理成功',
            })
            postDeviceWarnInfo()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}



onMounted(()=>{
    postDeviceWarnInfo()
    
})


</script>
<template>

     <!-- 弹出框/处理 -->
     <el-dialog v-model="handleDialogVisible" title="处理" width="800" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto">
                <el-form-item label="处理结果:">
                    <el-select v-model="addForm.status" placeholder="请选择">
                        <el-option label="未解决" value="3" />
                        <el-option label="已解决" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%;">
                    <el-input v-model="addForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitStatus">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>


    <div class="flex_bg">
        <ul class="page_tabs">
            <!-- <li v-for="(item,index) in pageTabsNav" @click="clickPageTabs(index)" :class="pageTabsIndex == index?'hover':''">{{ item }}</li> -->
            <li @click="clickPageTabs(1)" :class="pageTabsIndex == 1?'hover':''">输煤程控设备</li>
            <li @click="clickPageTabs(0)" :class="pageTabsIndex == 0?'hover':''">煤场设备</li>
        </ul>
        
        <div class="flex_between mt20">
            <div class="device_tabs">
                <div class="name">设备状态:</div>
                <ul>
                    <!-- <li v-for="(item, index) in deviceStatus"  :class="faultIndex == item.dictValue ? 'hover' : ''" :key="index"
                        @click="clickFault(item.dictValue)">
                        {{ item.dictLabel }}
                    </li> -->
                    <li :class="faultIndex == 0 ? 'hover' : ''" @click="clickFault(0)">未处理</li>
                    <li :class="faultIndex == 1 ? 'hover' : ''" @click="clickFault(1)">已处理</li>
                </ul>
            </div>
            <!-- <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
            <el-button v-if="pageTabsIndex == 1" type="primary" color="#2565C8" @click="addDialogVisible = true, resetAddForm(ruleFormRef1)">新增</el-button>
            <el-button v-if="pageTabsIndex == 0" type="primary" color="#2565C8" @click="addDialogVisible0 = true, resetAddForm(ruleFormRef0)">新增</el-button> -->
        </div>
        
        <!-- tab1 -->
        <el-table v-if="pageTabsIndex == 1"
            class="mt20"
            :data="listTableData" 
            size="large" 
            :border="false" 
            :stripe="false"
            :highlight-current-row="false" 
            :height="tableHeight" 
            style="width: 100%;" 
            :row-class-name="rowClassName"
            header-cell-class-name="table_big_th"
            ref="multipleTableRef">
            <el-table-column label="序号" type="index" width="70" align="center" />
            <el-table-column label="预警设备" prop="deviceCode" />
            <el-table-column label="预警消息" prop="warnMsg" />
            <el-table-column label="预警开始时间" prop="startTime" />
            <el-table-column label="预警持续时间" prop="alarmTimeNum" >
                <template #default="scope">
                    {{ scope.row.alarmTimeNum }} (分钟)
                </template>
            </el-table-column>
            <el-table-column label="处理完成时间" prop="doneDate" />
            <el-table-column label="当前状态" prop="status" >
                <template #default="scope">
                    <span v-if="scope.row.status == 3||scope.row.status == 0">未处理</span>
                    <span v-if="scope.row.status == 1">已处理</span>
                    <span v-if="scope.row.status == 2">已忽略</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="220">
                <template #default="scope">
                    <div class="table_btn">
                        <span v-if="scope.row.status == 0">
                            <a href="javascript:;" @click="ignore(scope.row.id)">忽略</a>|
                            <a href="javascript:;" @click="handleDialogVisible = true,sId = scope.row.id">处理</a>|
                        </span>
                        <RouterLink to="/device/warningList/info">查看视频</RouterLink>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- tab2 -->
        <el-table v-if="pageTabsIndex == 0"
            class="mt20"
            :data="listTableData" 
            size="large" 
            :border="false" 
            :stripe="false"
            :highlight-current-row="false" 
            :height="tableHeight" 
            style="width: 100%;" 
            :row-class-name="rowClassName"
            header-cell-class-name="table_big_th"
            ref="multipleTableRef">
            <el-table-column label="序号" type="index" width="70" align="center" />
            <el-table-column label="预警设备名称" prop="deviceCode" />
            <el-table-column label="安装位置" prop="devicePosition" />
            <el-table-column label="预警消息" prop="warnMsg" />
            <el-table-column label="预警开始时间" prop="startTime" />
            <el-table-column label="预警持续时间" prop="alarmTimeNum" >
                <template #default="scope">
                    {{ scope.row.alarmTimeNum }} (分钟)
                </template>
            </el-table-column>
            <el-table-column label="处理完成时间" prop="doneDate" />
            <el-table-column label="当前状态" prop="status" >
                <template #default="scope">
                    <span v-if="scope.row.status == 0">未处理</span>
                    <span v-if="scope.row.status == 1">已处理</span>
                    <span v-if="scope.row.status == 2">已忽略</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="220">
                <template #default="scope">
                    <div class="table_btn">
                        <span v-if="scope.row.status == 0">
                            <a href="javascript:;"  >忽略</a>|
                            <a href="javascript:;"  >处理</a>|
                        </span>
                        <a href="javascript:;"  >查看视频</a>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination v-model:current-page="PageNum" v-model:page-size="PageSize" @current-change="postDeviceWarnInfo" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>

</template>
<style scoped lang="scss">
::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}

</style>